import React, { useState, useEffect } from 'react';
import { XMarkIcon, BellIcon, MegaphoneIcon } from '@heroicons/react/24/outline';
import { Announcement } from '../shared/types';

type Props = {
  announcements: Announcement[];
  onClose: () => void;
}

const AnnouncementModal = ({ announcements, onClose }: Props) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    // 延迟显示模态框，让页面加载完成
    const timer = setTimeout(() => {
      setShowModal(true);
    }, 1000);
    return () => clearTimeout(timer);
  }, []);

  const handleClose = () => {
    setShowModal(false);
    setTimeout(onClose, 300); // 等待动画完成
  };

  const handleNext = () => {
    if (currentIndex < announcements.length - 1) {
      setCurrentIndex(currentIndex + 1);
    }
  };

  const handlePrev = () => {
    if (currentIndex > 0) {
      setCurrentIndex(currentIndex - 1);
    }
  };

  if (!showModal || announcements.length === 0) {
    return null;
  }

  const currentAnnouncement = announcements[currentIndex];

  const getTypeIcon = (type: string) => {
    switch (type) {
      case 'notice': return <MegaphoneIcon className="w-5 h-5" />;
      case 'maintenance': return <BellIcon className="w-5 h-5" />;
      case 'event': return <BellIcon className="w-5 h-5" />;
      case 'policy': return <BellIcon className="w-5 h-5" />;
      case 'emergency': return <BellIcon className="w-5 h-5" />;
      default: return <BellIcon className="w-5 h-5" />;
    }
  };

  const getTypeColor = (type: string) => {
    switch (type) {
      case 'notice': return 'bg-blue-100 text-blue-800';
      case 'maintenance': return 'bg-yellow-100 text-yellow-800';
      case 'event': return 'bg-green-100 text-green-800';
      case 'policy': return 'bg-purple-100 text-purple-800';
      case 'emergency': return 'bg-red-100 text-red-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  const getTypeText = (type: string) => {
    switch (type) {
      case 'notice': return '通知';
      case 'maintenance': return '维护';
      case 'event': return '活动';
      case 'policy': return '政策';
      case 'emergency': return '紧急';
      default: return '公告';
    }
  };

  return (
    <div className={`fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 transition-opacity duration-300 ${showModal ? 'opacity-100' : 'opacity-0'}`}>
      <div className={`bg-white rounded-lg p-6 w-full max-w-2xl mx-4 transform transition-transform duration-300 ${showModal ? 'scale-100' : 'scale-95'}`}>
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <BellIcon className="w-6 h-6 text-primary" />
            <h2 className="text-xl font-bold text-gray-900">重要公告</h2>
          </div>
          <button
            onClick={handleClose}
            className="text-gray-400 hover:text-gray-600 transition-colors"
          >
            <XMarkIcon className="w-6 h-6" />
          </button>
        </div>

        <div className="mb-4">
          <div className="flex items-center gap-2 mb-2">
            <div className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full ${getTypeColor(currentAnnouncement.type)}`}>
              {getTypeIcon(currentAnnouncement.type)}
              {getTypeText(currentAnnouncement.type)}
            </div>
            {currentAnnouncement.isPinned && (
              <span className="inline-flex px-2 py-1 text-xs font-medium rounded-full bg-primary text-white">
                置顶
              </span>
            )}
          </div>
          <h3 className="text-lg font-semibold text-gray-900 mb-2">
            {currentAnnouncement.title}
          </h3>
          <p className="text-gray-700 leading-relaxed whitespace-pre-line">
            {currentAnnouncement.content}
          </p>
        </div>

        <div className="flex items-center justify-between pt-4 border-t border-gray-200">
          <div className="text-sm text-gray-500">
            发布时间: {currentAnnouncement.publishDate}
            {currentAnnouncement.expireDate && ` | 有效期至: ${currentAnnouncement.expireDate}`}
          </div>
          
          {announcements.length > 1 && (
            <div className="flex items-center gap-2">
              <button
                onClick={handlePrev}
                disabled={currentIndex === 0}
                className="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                上一条
              </button>
              <span className="text-sm text-gray-500">
                {currentIndex + 1} / {announcements.length}
              </span>
              <button
                onClick={handleNext}
                disabled={currentIndex === announcements.length - 1}
                className="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                下一条
              </button>
            </div>
          )}
        </div>

        <div className="flex justify-end gap-3 mt-4">
          <button
            onClick={handleClose}
            className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-300 transition-colors"
          >
            我知道了
          </button>
        </div>
      </div>
    </div>
  );
};

export default AnnouncementModal;